<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        .wrap{
            padding: 8px;
        }
        .wrap button{
            width: 45px;
            height: 30px;
        }
        .wrap button~button{
            margin-left: 10px;
        }
        .slideBar{
            width: 1100px;
            height: 100px;
            margin-top: 10px;
            border: 1px solid #333;
            border-top: 0;
            position: relative;
        }
        .ball{
            width: 100px;
            height: 100px;
            background-color: #6ff;
            position: absolute;
            left:1000px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="buttonGroup">
            <button class="start">开始</button>
            <button class="pause">暂停</button>
            <button class="back">返回</button>
        </div>
        <div class="slideBar">
            <div class="ball"></div>
        </div>
    </div>
</body>
<script>
    // JS运动  每隔固定时间改变元素的位置(宽度/高度 )
    // (1)  计时器 / 延时器
    // (2)  改变元素的位置   => margin position translate

    var start = document.getElementsByClassName("start")[0];
    var pause = document.getElementsByClassName("pause")[0];
    var back = document.getElementsByClassName("back")[0];
    var ball = document.getElementsByClassName("ball")[0];

    var timer = null; // 全局变量 记录计时器的编号

    // 点击开始  从当前位置 => 终点 (1000)
    // 正向运动  从当前位置 => 终点 (1000)   终点值>起点值
    start.onclick = function(){
        var cur = ball.offsetLeft;    // 1. 记录盒子的起始位置   2. 记录每次运动之后盒子的位置
        var end = 1000;               // 设置运动的终点值
        var speed = 9;                // 每隔10ms运动的距离  (匀速)
        clearInterval(timer);         // 每次启动下一个之前 清除上一个
        timer = setInterval(function(){
            cur += speed;
            console.log(cur);

            ball.style.left = cur + "px";

            // 问题: 理想情况下 cur == end,但是如果需要运动的距离(终点值 - 起点值) 不是速度的整数倍  => 不会停止
            // 解决方法:   
            // (1)  cur >= end
            // (2)  Math.abs(end - cur) <= Math.abs(speed)
            // 新的问题  => 超出几像素  => 强制到达终点

            if(cur >= end){
                clearInterval(timer);
                ball.style.left = end + "px";  // 
            }

        },10)
    }


    pause.onclick = function(){
        clearInterval(timer);
    }

    // 反向运动  从当前位置 => 终点 (0)    终点值 < 起点值
    back.onclick = function(){
        var cur = ball.offsetLeft;    // !!!!!!!! 1. 记录盒子的起始位置   2. 记录每次运动之后盒子的位置
        var end = 0;               // 设置运动的终点值
        var speed = -9;                // 每隔10ms运动的距离  (匀速)
        clearInterval(timer);          // !!!!!!!!  每次启动下一个之前 清除上一个
        timer = setInterval(function(){
            cur += speed;
            console.log(cur);

            ball.style.left = cur + "px";

            // !!!!!!!!!!!终点值的验证 
            // 问题: 理想情况下 cur == end,但是如果需要运动的距离(终点值 - 起点值) 不是速度的整数倍  => 不会停止
            // 解决方法:   
            // (1)  cur <= end
            // (2)  Math.abs(end - cur) <= Math.abs(speed)
            // 新的问题  => 超出几像素  => 强制到达终点

            if(cur <= end){
                clearInterval(timer);
                ball.style.left = end + "px";  // 
            }

        },10)
    }



    
</script>
</html>